<template>
  <div>
    <!-- <form
      action="http://192.168.0.5:9080/imageData/batchUpload"
      enctype="multipart/form-data"
      method="post"
    >
      <input maxlength="100" type="hidden" name="type" value="1" />
      <input maxlength="100" id="dir" type="file" name="file" webkitdirectory mozdirectory />
      <input maxlength="100" id="uploadDir" type="submit" value="提交文件夹" />
    </form> -->
    <el-button @click="upload">上传</el-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  methods: {
    upload() {
      let fileInput = document.createElement("input");
      fileInput.type = "file";
      document.body.appendChild(fileInput);
      fileInput.setAttribute("accept", "img/*");
      fileInput.id = "fileInput";
      fileInput.style.cssText = "display:none;";
      fileInput.webkitdirectory = true;
      fileInput.click();
      fileInput.addEventListener("change", (e) => {
        let formData = new FormData();
        e.target.files.forEach((element) => {
          formData.append("files", element);
        });
        console.log(555, formData);
        axios
          .post("http://192.168.43.197:9080/imageData/batchUpload", formData)
          .then((res) => {
            alert(res);
          });
        // this.$api.batchUpload(formData).then((res) => {
        //   alert(res);
        // });
        console.log(666, e);
        fileInput.remove();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>